<%--
  Created by IntelliJ IDEA.
  User: waqwb
  Date: 2021/12/21
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>用户注册 - 当当网</title>
    <link href="${pageContext.request.contextPath}/css/login.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/css/page_bottom.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <%--   上课的时候忘记引入js文件   --%>
    <script type="application/javascript"
            src="${pageContext.request.contextPath}/js/jquery-3.5.0.min.js"></script>
</head>

<body>
<div class="login_top">
    <a href="booklist.html"><img class="logo" src="${pageContext.request.contextPath}/images/logo.gif" /> </a>
</div>
<div class="login_step">
    注册步骤:
    <span class="red_bold">1.填写信息</span> &gt; 2.注册成功
</div>
<div class="fill_message">
    <form id="form" name="ctl00" method="post" action="${pageContext.request.contextPath}/register" id="f">
        <h2>
            以下均为必填项
        </h2>
        <table class="tab_login">
            <tr>
                <td valign="top" class="w1">
                    请填写您的Email地址：
                </td>
                <td>
                    <input type="text" name="email" id="email" class="text_input">
                    <div class="text_left" id="emailValidMsg">
							<%--<span>
								请填写有效的Email地址。
							</span>--%>
                        <%--   当鼠标移出输入框的时候，会在这个span标签中显示提示信息  --%>
                        <span id="emailInfo" style="color: red"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top" class="w1">
                    设置您在当当网的昵称：
                </td>
                <td>
                    <input type="text" name="nickname" id="nickname" class="text_input">
                    <div class="text_left" id="nickNameValidMsg">
                       <%-- <p>
                            请输入昵称。
                        </p>--%>
                        <span id="nicknameInfo" style="color: red"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top" class="w1">
                    设置密码：
                </td>
                <td>
                    <input type="password" name="password" id="password" class="text_input">
                    <div class="text_left" id="passwordValidMsg">
<%--                        <p>--%>
<%--                            请输入密码。--%>
<%--                        </p>--%>
                        <span id="passwordInfo" style="color: red"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top" class="w1">
                    再次输入您设置的密码：
                </td>
                <td>
                    <input type="password" id="repeatPassword" class="text_input">
                    <div class="text_left" id="repeatPassValidMsg">
                        <span id="repeatPasswordInfo" style="color: red"></span>
                    </div>
                </td>
            </tr>
        </table>
        <div class="login_in">
            <input type="submit" id="btnClientRegister" class="button_1" value="注册">
        </div>
    </form>
</div>
<div>
    <hr style="height: 1px; width: 972px; color: #cfcfcf" />
    <div class="b_left"></div>
    <div class="publish_bottom_message2">
        <div class="copyright">
            Copyright (C) 当当网 2004-2008, All Rights Reserved
        </div>
        <div class="validate">
            <a href="#http://www.hd315.gov.cn/beian/view.asp?bianhao=010202001051000098" target="_blank"> <img
                    src="${pageContext.request.contextPath}/images/validate.gif" border="0" />
            </a>
            <p>
                <a href="" target="_blank">京ICP证041189号</a>
            </p>
        </div>
    </div>
</div>
<%-- 完成js校验，当鼠标离开注册页面的输入框的时候，如果内容非法，那么提示用户--%>
<script type="application/javascript">
    $(function(){
        //开关，我们需要用他们来判断用户输入的信息是否符合规范
        var isRightEmail = false;
        var isRightNickname = false;
        var isRightPassword = false;
        var isRightRepeatPassword = false;
        //判断当鼠标离开输入用户邮箱的输入框时
        $("#email").blur(function () {
            //获取id为email标签中输入的值
            var email = $("#email").val();
            //判断email值
            if (email.length == 0){
                //说明在input标签中没有输入任何文字
                $("#emailInfo").text("邮箱不能为空，请输入邮箱地址");
                isRightEmail = false;
            } else {
                //说明在input标签中输入了内容    ctrl+shift+/
               /* $("#emailInfo").text("邮箱输入成功，请填写下一项");
                isRightEmail = true;*/
                //判断邮箱是否已经存在
                $.ajax({
                    url:"${pageContext.request.contextPath}/checkEmail",
                    type:"post",
                    data:{"email":email},
                    success:function (result) {
                        if (result==0){
                            $("#emailInfo").text("邮箱已经存在，请重新输入");
                            isRightEmail = false;
                        }else {
                            $("#emailInfo").text("邮箱可以注册，请点击注册");
                            isRightEmail = true;
                        }
                    }
                });
            }
        });
        $("#nickname").blur(function () {
            //1、获取输入框的内容
            var nickname = $("#nickname").val();
            if (nickname.length == 0){
                $("#nicknameInfo").text("昵称不能为空，请填写昵称");
                isRightNickname = false;
            } else {
                $("#nicknameInfo").text("昵称可用，请填写下一项");
                isRightNickname = true;
            }
        });
        $("#password").blur(function () {
            var password = $("#password").val();
            if (password == 0){
                $("#passwordInfo").text("密码不能为空，请输入密码");
                isRightPassword = false;
            } else {
                $("#passwordInfo").text("请输入下一项");
                isRightPassword = true;
            }
        });
        $("#repeatPassword").blur(function () {
            var repeatPassword = $("#repeatPassword").val();
            if (repeatPassword == 0){
                $("#repeatPasswordInfo").text("确认密码不能为空，请输入密码");
                isRightRepeatPassword = false;
            } else {
                $("#repeatPasswordInfo").text("请输入下一项");
                isRightRepeatPassword = true;
            }
        });
        //当我们点击注册按钮的时候触发的事件
        $("#btnClientRegister").click(function () {
            //只有当注册页面四个输入框都有值的时候，才可以点击注册按钮
            if (isRightEmail && isRightNickname && isRightPassword && isRightRepeatPassword){
                //&&逻辑与：当所有的条件都为true的时候才是true
                $("#form").submit();
            }
        });
    })
</script>
</body>

</html>

